﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags-->
    <!-- Title-->
    <title>称重管理系统</title>
    <!-- Favicon-->
    <link rel="icon" href="img/core-img/favicon.ico">
    <!-- Core Stylesheet-->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- Preloader-->
    <div class="preloader" id="preloader">
      <div class="spinner-grow text-secondary" role="status">
        <div class="sr-only">Loading...</div>
      </div>
    </div>
    <!-- Header Area-->
    <div class="header-area" id="headerArea">
      <div class="container h-100 d-flex align-items-center justify-content-between">
        <!-- Back Button-->
        <div class="back-button"><a href="index.html"><i class="icofont-rounded-left"></i>Back</a></div>
        <!-- Page Title-->
        <div class="page-heading">
          <h6 class="mb-0">Product Catagory</h6>
        </div>
        <!-- Filter Option-->
        <div class="filter-option" id="suhaNavbarToggler"><i class="icofont-gear"></i></div>
      </div>
    </div>
    <!-- Sidenav Black Overlay-->
    <div class="sidenav-black-overlay"></div>
    <!-- Side Nav Wrapper-->
    <div class="suha-sidenav-wrapper filter-nav" id="sidenavWrapper">
      <!-- Catagory Sidebar Area-->
      <div class="catagory-sidebar-area">
        <!-- Filter Title-->
        <h5 class="mb-3">Filter</h5>
        <!-- Catagory-->
        <div class="widget catagory mb-4">
          <h6 class="widget-title mb-3">Product Brand</h6>
          <div class="widget-desc">
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck1" type="checkbox">
              <label class="custom-control-label" for="customCheck1">Zara</label>
            </div>
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck2" type="checkbox">
              <label class="custom-control-label" for="customCheck2">Gucci</label>
            </div>
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck3" type="checkbox">
              <label class="custom-control-label" for="customCheck3">Addidas</label>
            </div>
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck4" type="checkbox">
              <label class="custom-control-label" for="customCheck4">Nike</label>
            </div>
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck5" type="checkbox">
              <label class="custom-control-label" for="customCheck5">Denim</label>
            </div>
          </div>
        </div>
        <!-- Color-->
        <div class="widget color mb-4">
          <h6 class="widget-title mb-3">Color Family</h6>
          <div class="widget-desc">
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck6" type="checkbox">
              <label class="custom-control-label" for="customCheck6">Purple</label>
            </div>
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck7" type="checkbox">
              <label class="custom-control-label" for="customCheck7">Black</label>
            </div>
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck8" type="checkbox">
              <label class="custom-control-label" for="customCheck8">White</label>
            </div>
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck9" type="checkbox">
              <label class="custom-control-label" for="customCheck9">Red</label>
            </div>
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck10" type="checkbox">
              <label class="custom-control-label" for="customCheck10">Pink</label>
            </div>
          </div>
        </div>
        <!-- Size-->
        <div class="widget size mb-4">
          <h6 class="widget-title mb-3">Size</h6>
          <div class="widget-desc">
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck21" type="checkbox">
              <label class="custom-control-label" for="customCheck21">Xtra Large</label>
            </div>
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck22" type="checkbox">
              <label class="custom-control-label" for="customCheck22">Large</label>
            </div>
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck23" type="checkbox">
              <label class="custom-control-label" for="customCheck23">Midium</label>
            </div>
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck24" type="checkbox">
              <label class="custom-control-label" for="customCheck24">Small</label>
            </div>
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck25" type="checkbox">
              <label class="custom-control-label" for="customCheck25">Extra Small</label>
            </div>
          </div>
        </div>
        <!-- Ratings-->
        <div class="widget ratings mb-4">
          <h6 class="widget-title mb-3">Ratings</h6>
          <div class="widget-desc">
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck11" type="checkbox">
              <label class="custom-control-label" for="customCheck11">5 star</label>
            </div>
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck12" type="checkbox">
              <label class="custom-control-label" for="customCheck12">4 star</label>
            </div>
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck13" type="checkbox">
              <label class="custom-control-label" for="customCheck13">3 star</label>
            </div>
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck14" type="checkbox">
              <label class="custom-control-label" for="customCheck14">2 star</label>
            </div>
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck15" type="checkbox">
              <label class="custom-control-label" for="customCheck15">1 star</label>
            </div>
          </div>
        </div>
        <!-- Payment Type-->
        <div class="widget payment-type mb-4">
          <h6 class="widget-title mb-3">Payment Type</h6>
          <div class="widget-desc">
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck16" type="checkbox">
              <label class="custom-control-label" for="customCheck16">Cash On Delivery</label>
            </div>
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck17" type="checkbox">
              <label class="custom-control-label" for="customCheck17">Paypal</label>
            </div>
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck18" type="checkbox">
              <label class="custom-control-label" for="customCheck18">Check Payment</label>
            </div>
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck19" type="checkbox">
              <label class="custom-control-label" for="customCheck19">Payonner</label>
            </div>
            <!-- Single Checkbox-->
            <div class="custom-control custom-checkbox d-flex align-items-center mb-2">
              <input class="custom-control-input" id="customCheck20" type="checkbox">
              <label class="custom-control-label" for="customCheck20">Mobile Banking</label>
            </div>
          </div>
        </div>
        <!-- Apply Filter-->
        <div class="apply-filter-btn"><a class="btn btn-success" href="">Apply Filter</a></div>
      </div>
      <!-- Go Back Button-->
      <div class="go-home-btn" id="goHomeBtn"><i class="icofont-rounded-left"></i></div>
    </div>
    <div class="page-content-wrapper">
      <!-- Catagory Single Image-->
      <div class="catagory-single-img"><img class="w-100" src="img/bg-img/4.jpg" alt=""></div>
      <!-- Product Catagories-->
      <div class="product-catagories-wrapper mt-3">
        <div class="container">
          <div class="section-heading">
            <h6 class="ml-1">Sub Catagory</h6>
          </div>
          <div class="product-catagory-wrap">
            <div class="row">
              <div class="col-4">
                <div class="card mb-3 subcatagory-card">
                  <div class="card-body"><a href="sub-catagory.html"><img src="img/core-img/clothing.svg" alt=""><span>Clothing</span></a></div>
                </div>
              </div>
              <div class="col-4">
                <div class="card mb-3 subcatagory-card">
                  <div class="card-body"><a href="sub-catagory.html"><img src="img/core-img/high-heels.svg" alt=""><span>Shoes</span></a></div>
                </div>
              </div>
              <div class="col-4">
                <div class="card mb-3 subcatagory-card">
                  <div class="card-body"><a href="sub-catagory.html"><img src="img/core-img/brassiere.svg" alt=""><span>Lingerie</span></a></div>
                </div>
              </div>
              <div class="col-4">
                <div class="card mb-3 subcatagory-card">
                  <div class="card-body"><a href="sub-catagory.html"><img src="img/core-img/bride.svg" alt=""><span>Wedding</span></a></div>
                </div>
              </div>
              <div class="col-4">
                <div class="card mb-3 subcatagory-card">
                  <div class="card-body"><a href="sub-catagory.html"><img src="img/core-img/earrings.svg" alt=""><span>Accessories</span></a></div>
                </div>
              </div>
              <div class="col-4">
                <div class="card mb-3 subcatagory-card">
                  <div class="card-body"><a href="sub-catagory.html"><img src="img/core-img/handbag.svg" alt=""><span>Bag's</span></a></div>
                </div>
              </div>
              <div class="col-4">
                <div class="card mb-3 subcatagory-card">
                  <div class="card-body"><a href="sub-catagory.html"><img src="img/core-img/sunbed.svg" alt=""><span>Travel</span></a></div>
                </div>
              </div>
              <div class="col-4">
                <div class="card mb-3 subcatagory-card">
                  <div class="card-body"><a href="sub-catagory.html"><img src="img/core-img/dress.svg" alt=""><span>Dress</span></a></div>
                </div>
              </div>
              <div class="col-4">
                <div class="card mb-3 subcatagory-card">
                  <div class="card-body"><a href="sub-catagory.html"><img src="img/core-img/make-up.svg" alt=""><span>Cosmetics</span></a></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Top Products-->
      <div class="top-products-area mt-3">
        <div class="container">
          <div class="section-heading d-flex align-items-center justify-content-between">
            <h6 class="ml-1">Catagory Products</h6>
          </div>
          <div class="row">                       
            <!-- Single Top Product Card-->
            <div class="col-6 col-sm-4">
              <div class="card top-product-card mb-3">
                <div class="card-body"><span class="badge badge-success">Sale</span><a class="wishlist-btn" href="#"><i class="icofont-heart"></i></a><a class="product-thumbnail d-block" href="single-product.html"><img class="mb-2" src="img/product/11.jpg" alt=""></a><a class="product-title d-block" href="single-product.html">Woolen Sweater</a>
                  <p class="sale-price">$13<span>$42</span></p>
                  <div class="product-rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></div><a class="btn btn-success btn-sm add2cart-notify" href="#"><i class="icofont-plus"></i></a>
                </div>
              </div>
            </div>
            <!-- Single Top Product Card-->
            <div class="col-6 col-sm-4">
              <div class="card top-product-card mb-3">
                <div class="card-body"><span class="badge badge-primary">New</span><a class="wishlist-btn" href="#"><i class="icofont-heart"></i></a><a class="product-thumbnail d-block" href="single-product.html"><img class="mb-2" src="img/product/5.jpg" alt=""></a><a class="product-title d-block" href="single-product.html">Ciramic Pots</a>
                  <p class="sale-price">$74<span>$99</span></p>
                  <div class="product-rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></div><a class="btn btn-success btn-sm add2cart-notify" href="#"><i class="icofont-plus"></i></a>
                </div>
              </div>
            </div>
            <!-- Single Top Product Card-->
            <div class="col-6 col-sm-4">
              <div class="card top-product-card mb-3">
                <div class="card-body"><span class="badge badge-success">Sale</span><a class="wishlist-btn" href="#"><i class="icofont-heart"></i></a><a class="product-thumbnail d-block" href="single-product.html"><img class="mb-2" src="img/product/6.jpg" alt=""></a><a class="product-title d-block" href="single-product.html">Roof Lamp</a>
                  <p class="sale-price">$99<span>$113</span></p>
                  <div class="product-rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></div><a class="btn btn-success btn-sm add2cart-notify" href="#"><i class="icofont-plus"></i></a>
                </div>
              </div>
            </div>
            <!-- Single Top Product Card-->
            <div class="col-6 col-sm-4">
              <div class="card top-product-card mb-3">
                <div class="card-body"><span class="badge badge-danger">-15%</span><a class="wishlist-btn" href="#"><i class="icofont-heart"></i></a><a class="product-thumbnail d-block" href="single-product.html"><img class="mb-2" src="img/product/9.jpg" alt=""></a><a class="product-title d-block" href="single-product.html">Red Tops</a>
                  <p class="sale-price">$87<span>$92</span></p>
                  <div class="product-rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></div><a class="btn btn-success btn-sm add2cart-notify" href="#"><i class="icofont-plus"></i></a>
                </div>
              </div>
            </div>
            <!-- Single Top Product Card-->
            <div class="col-6 col-sm-4">
              <div class="card top-product-card mb-3">
                <div class="card-body"><span class="badge badge-danger">-11%</span><a class="wishlist-btn" href="#"><i class="icofont-heart"></i></a><a class="product-thumbnail d-block" href="single-product.html"><img class="mb-2" src="img/product/8.jpg" alt=""></a><a class="product-title d-block" href="single-product.html">White Dress</a>
                  <p class="sale-price">$21<span>$25</span></p>
                  <div class="product-rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></div><a class="btn btn-success btn-sm add2cart-notify" href="#"><i class="icofont-plus"></i></a>
                </div>
              </div>
            </div>
            <!-- Single Top Product Card-->
            <div class="col-6 col-sm-4">
              <div class="card top-product-card mb-3">
                <div class="card-body"><span class="badge badge-warning">Hot</span><a class="wishlist-btn" href="#"><i class="icofont-heart"></i></a><a class="product-thumbnail d-block" href="single-product.html"><img class="mb-2" src="img/product/4.jpg" alt=""></a><a class="product-title d-block" href="single-product.html">Polo Shirts</a>
                  <p class="sale-price">$38<span>$41</span></p>
                  <div class="product-rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></div><a class="btn btn-success btn-sm add2cart-notify" href="#"><i class="icofont-plus"></i></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Footer Nav-->
    <div class="footer-nav-area" id="footerNav">
      <div class="suha-footer-nav h-100">
        <ul class="h-100 d-flex align-items-center justify-content-between">
            <li><a href="index.html"><img src="img/core-img/home.svg" alt="">首页</a></li>
            <li><a href="message.html"><img src="img/core-img/chat.svg" alt="">消息</a></li>
            <li><a href="cart.html"><img src="img/core-img/shopping-cart.svg" alt="">购物车</a></li>
            <li><a href="pages.html"><img src="img/core-img/heart.svg" alt="">页面</a></li>
            <li><a href="settings.html"><img src="img/core-img/settings.svg" alt="">设置</a></li>
        </ul>
      </div>
    </div>
    <!-- All JavaScript Files-->
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/waypoints.min.js"></script>
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/imagesloaded.pkgd.min.js"></script>
    <script src="js/isotope.pkgd.min.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script src="js/jquery.animatedheadline.min.js"></script>
    <script src="js/jquery.counterup.min.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="js/jarallax.min.js"></script>
    <script src="js/jarallax-video.min.js"></script>
    <script src="js/default/jquery.passwordstrength.js"></script>
    <script src="js/default/active.js"></script>
  </body>
</html>